<template>
  <el-header class="nav">
    <el-row :gutter="20">
      <!-- <el-col :span="6"> -->
      <el-col :xs="0" :sm="2" :md="6" :lg="6" :xl="6">
        <LeftLogo></LeftLogo>
      </el-col>
      <!-- <el-col :span="8"> -->
      <el-col :xs="4" :sm="8" :md="8" :lg="8" :xl="8">
        <Menu></Menu>
      </el-col>
      <!-- <el-col :span="8"> -->
      <el-col :xs="18" :sm="8" :md="8" :lg="8" :xl="8">
        <SearchBox @search="$emit('search')"></SearchBox>
      </el-col>
      <!-- <el-col :span="2" :offset="0"> -->
      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
        <UserAvatar></UserAvatar>
      </el-col>
    </el-row>
  </el-header>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import LeftLogo from "./LeftLogo.vue";
import Menu from "./Menu.vue";
import SearchBox from "./SearchBox.vue";
import UserAvatar from "./UserAvatar.vue";
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { emit } from "process";
const router = useRouter();
emit: ['search']
const search = (searchText: String) => {
  if (!searchText) {
    ElMessage({ message: '请输入搜索的内容', type: 'error' })
    return
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.nav {
  background-color: #fff;
  border-bottom: 10px;
}
</style>

function $emit(arg0: string, searchText: String) {
  throw new Error("Function not implemented.");
}
